<script setup lang="ts">
import { ref } from "vue";
 
const list = ref(['🐍','🐉','🐎','🐂','🐖'])

const jake = ref({
age:19,
food:'🐖',
friend:'rose'
})
</script>



<template>

<ul>
  <li v-for="(item,index) in list" :key = index >{{ item }}---{{ index+1 }}</li>
<!-- 下标如果不需熬可以不写 -->
  <li v-for="item in list" :key="item">{{ item }}---{{ item }}</li>


  <!-- 循环对象
  第一项：属性值
  第二项：键 -->
<li v-for="(item) in jake" :key="item">
{{ item }} ---{{ key }}
</li>

<!-- 基于数组 生成列表 -->
<li v-for="(item,index) in 10" :key="index">基于数组 生成列表</li>
</ul>

</template>



<style scoped>
div img{
  width: 200px;
  height: 200px;
}

.box{
  width: 100px;
  height: 100px;
  border: 1px solid chartreuse;
}
.buluStr{
  border: 10px solid blue;
  background-color: yellow;
}
</style>